<!DOCTYPE html>
<html>
	<!--主页-->
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登陆</title>
		<link rel="stylesheet" type="text/css" href="skin/css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="skin/css/animate.css"/>
		<link rel="stylesheet" type="text/css" href="skin/css/honeySwitch.css"/>
		
		
		<style type="text/css">
			#app{
				padding: 0;
			}
			/* 钱包板块 */
			#top{
				position: fixed;
				top:0;
				width: 100%;
				height: 366px;
			}
			#top>.top-main{
				height: 330px;
				width: 100%;
				background: url(skin/img/home-bg.png) no-repeat center center;
				background-size: 100% 100%;
			}
			.hea{
				height: 60px;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
			}
			.hea>span{
				display: inline-block;
				height: 25px;
				width: 25px;
				margin:0 15px;
			}
			.hea>span:first-of-type{
				background: url(skin/img/icon-tap.png) center bottom;				
				background-size: 100% 100%;
			}
			.hea>span:last-of-type{
				background: url(skin/img/icon-notice.png) center center;				
				background-size: 100% 100%;
			}
			.avatar{
				height: 100px;
				width:100px;
				margin:10px auto 10px;
				background: url(skin/img/avata-2.png) center center;
				background-size: 100% 100%;
			}
			.mon-address{
				width: 70%;
				height: 30px;
				margin: auto;
				padding:0 10px;
				border-radius: 20px;
				background: rgba(40,125,254,.5);
				line-height: 30px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: white;
			}
			.mon-com{
				padding:18px 0 5px;
				font-size:18px;
				text-align: center;
				color: white;
				opacity: .8;
			}
			.user-info{
				display: flex;
				padding: 0 15px;
			}
			.user-info>div{
				flex:1 1 0;
				height: 50px;
			}
			@-webkit-keyframes new-user{
				0%{
					transform: rotateZ(-5deg);
				}
				50%{
					transform: rotateZ(5deg);
				}
				100%{
					transform: rotateZ(-5deg);
				}
			}
			.user-info>div:nth-of-type(1){
				line-height: 110px;
				color: rgba(255,255,255,.6);
			}
			.user-info .red-no{
				background:url(skin/img/mon-ani.png) no-repeat left top;
				background-size: 60px 50px;
			}
			.user-info .red-yes{
				background:url(skin/img/red-ev.png) no-repeat left top;
				background-size: 60px 50px;
			}
			.user-info .ani-user{
				transform-origin: center left;
				animation:  new-user 1s infinite;
			}
			.user-info>div:nth-of-type(2){
				background:url(skin/img/icon-money.png) no-repeat 18px bottom;
				background-size: 30px 30px;
				text-indent: 53px;
				font-size: 30px;
				color: white;
				line-height: 80px;
			}
			.user-info>div:nth-of-type(3){
				background: url(skin/img/icon-add.png) no-repeat right bottom;
				background-size: 38px 35px;
			}
			.top-btn{
				display: flex;
			}
			.top-btn>button{
				height: 36px;
				flex:1 1 0;
				border:none;
				border-top: 1px solid rgba(255,255,255,.3);
				text-align: center;
				color: rgba(255,255,255,.5);;
				font-size:15px;
				line-height: 36px;
				background: #67a0ff;
				outline: none;
			}
			.top-btn>button:first-of-type{
				border-right: 1px solid rgba(255,255,255,.3);
			}
			#mid{
				position: fixed;
				top:366px;
				width: 100%;
				height: calc( 100vh - 366px - 60px);
				overflow: auto;
			}
			#mid::-webkit-scrollbar {
			    width:0px;
			    height:0px;
			}
			.mon-con{
				display: flex;
				justify-content: space-between;
				height: 50px;
				padding:10px;
				border-bottom: 1px solid #eee;
			}
			.mon-con>div{
				display: flex;
			}
			.mon-con>p{
				font-size:18px;
				line-height: 50px;
				opacity: .7;
			}
			.mon-con>div>p{
				display: flex;
				flex-direction: column;
				padding-top: 5px;
				padding-left: 8px;
				font-size:15px;
				line-height: 20px;
			}
			.mon-con>div>p>span{
				color: #999;
			}
			/* 钱包板块 */
			
			/* 咨询板块 */
			/* #par-cons-wrap{
				height: calc(100vh - 50px);
				background: yellow;
			} */
			.cons-hea{
				position: fixed;
				top:0;
				display: flex;
				align-items: flex-end;
				width: 100%;
				height: 70px;
				box-sizing: border-box;
				padding: 0 18px;
				background: #3573FA;
			}
			.cons-hea>span{
				margin-bottom: 8px;
			}
			.cons-hea>span:nth-of-type(1){
				flex: 0 0 80px;
				color: rgba(255,255,255,.7);
			}
			.cons-hea>span:nth-of-type(2){
				flex: 1 1 0;
				text-align: center;
				font-size: 18px;
				line-height: 25px;
				color: white;
			}
			.cons-hea>span:nth-of-type(3){
				flex: 0 0 80px;
				display: flex;
				justify-content: flex-end;
			}
			.cons-content{
				position: fixed;
				top:70px;
				box-sizing: border-box;
				width: 100%;
				height: calc(100vh - 70px - 60px);
				padding-left:24px;
				padding-right:20px;
				overflow: auto;
			}
			.cons-content::-webkit-scrollbar{
				width: 0;
				height: 0;
			}
			.cons-info-wrap{
				position: relative;
				padding-left: 6px;
				padding-bottom: 15px;
				border-left: 1px solid #eee;
			}
			.cons-info-wrap>span{
				position: absolute;
				top:0;
				left:-20px;
				width: 40px;
				padding: 3px 0 ;
				background: #3573FA;
				border-radius: 10px;
				text-align: center;

				color: white;
			}
			.cons-info-wrap>h1{
				padding: 30px 0 10px;
				font-size: 15px;
			}
			.cons-info-wrap>p{
				line-height: 25px;
				opacity: .7;
			}
			.cons-info-wrap>div{
				display: flex;
				
			}
			.cons-info-wrap>div>p:nth-of-type(1){
				flex: 0 0 100px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #8fe1b2;
			}
			.cons-info-wrap>div>p:nth-of-type(2){
				flex: 1 1 0;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ff929f;
			}
			.cons-info-wrap>div>p:nth-of-type(3){
				flex: 0 0 100px;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				color: #a9c3fd;
			}
			.cons-info-wrap>div>p>img{
				margin-right: 5px;
			}
			/* 咨询板块 */
			
			/* 行情板块 */
			#par-quo-wrap{
				height: calc(100vh - 50px);
			}
			.quota-hea{
				position: fixed;
				top: 0;
				width: 100%;
				height: 110px;
			}
			.quota-hea>p{
				height: 70px;
				background: #3573FA;
				font-size: 18px;
				text-align: center;
				line-height: 100px;
				color: white;
			}
			.quota-info-name{
				display: flex;
				align-items: flex-end;
				height: 25px;
				padding:0 10px 10px;
				border-bottom: 1px solid #eee;
			}
			.quota-info-name>span{
				flex: 1 1 0;
				text-align: center;
				font-size: 13px;
			}
			.quo-content-wrap{
				position: fixed;
				top:110px;
				width: 100%;
				height: calc(100vh - 169px);
				overflow: auto;
			}
			.quo-content-wrap::-webkit-scrollbar{
				width: 0;
			}
			.no-data{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top:200px;
				height: 100vh;
				width: 100vw;
			}
			.quo-list{
				display: flex;
				padding: 12px 10px;
				border-bottom: 1px solid #eee;
			}
			.quo-list>div{
				flex: 1 1 0;
				text-align: center;
			}
			.quo-list>.left-1{
				text-align: left;
			}
			.left-1>p,
			.left-2>p{
				padding: 2px 0;
			}
			.left-1>p:last-of-type,
			.left-2>p:last-of-type{
				opacity: .6;
			}
			.quo-list>.left-3{
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}
			.left-3>span{
				display: inline-block;
				padding: 4px 8px;
				border-radius: 3px;
				color: white;
			}
			.left-3>span.bg-green{
				background: #5DD6A5;
			}
			.left-3>span.bg-red{
				background: #BE5946;
			}
			/* 行情板块 */
			
			/* 底部导航控制 */
			#bottom{
				position: fixed;
				bottom: 0;
				display: flex;
				width: 100%;
				height: 50px;
				padding:10px 0 0;
				background: #faf8f8;
			}
			
			#bottom>div{
				flex: 1 1 0;
				text-align: center;
				line-height: 75px;
			}
			#bottom>div:nth-of-type(1){
				background: url(skin/img/icon-mon.png) no-repeat center top;
				background-size: 25px 25px;
			}
			#bottom>div.bg-wa-active{
				background: url(skin/img/icon-mon-ac.png) no-repeat center top;
				background-size: 25px 25px;
			}
			#bottom>div:nth-of-type(2){
				background: url(skin/img/icon-info.png) no-repeat center top;
				background-size: 25px 25px;
			}
			#bottom>div.bg-con-active{
				background: url(skin/img/icon-info-ac.png) no-repeat center top;
				background-size: 25px 25px;
			}
			#bottom>div:nth-of-type(3){
				background: url(skin/img/icon-quo.png) no-repeat center top;
				background-size: 25px 25px;
			}
			#bottom>div.bg-quo-active{
				background: url(skin/img/icon-quo-ac.png) no-repeat center top;
				background-size: 25px 25px;
			}
			/* 底部导航控制 */

			/* 遮罩层 */
			#mask{
				display: flex;
				position: absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				z-index: 2;
				background: rgba(0,0,0,.5);
			}
			#mask.default{
				justify-content: center;
				align-items: center;
			}
			#mask.left{
				justify-content: flex-start;
    			align-items: inherit;
    			bottom: 60px;
			}
			#mask.right{
				justify-content: flex-end;
    			align-items: inherit;
			}
			#mask>.ma-con{
				width: 60%;
				border-radius: 10px;
			}
			#mask.right>.ma-con{
				width: 80%;
			}
			#mask.user-qr>.ma-con{
				width: 80%;
			}
			#mask>.ma-con .small-close{
				display:block;
				width: 20px;
				height: 20px;
				margin:10px auto;
				background: url(skin/img/close.png) no-repeat center center;
				background-size: 100% 100%;
			}
			.ma-con>.mask2{
				background: white;
				border-radius: 15px;
			}
			.ma-con>.mask2>div{
				width: 50px;
				height: 50px;
				margin:10px auto;
				padding-top:15px;
			}
			.ma-con>.mask2>h2{
				padding:10px 0 ;
				font-size:16px;
				color: rgba(0,0,0,.8);
				text-align: center;
			}
			.ma-con>.mask2>button{
				width: 100%;
				height: 30px;
				margin-top: 20px;
				text-align: center;
				color: white;
				line-height: 30px;
				background: #3573FA;
				border: none;
				outline: none;
				border-radius:  0 0 15px 15px;
			}
			.ma-con>.mask2>p{
				padding:0 10px;
				font-size:13px;
				color: rgba(0,0,0,.5);
			}
			.ma-con>.left-tab-model{
				width: 100%;
				height: calc(100vh - 60px);
				background: white;
				border-top:1px solid #eee;
			}
			.left-tab-model>.avatar{
				width:100px;
				height: 100px;
				margin: 60px auto 30px;
			}
			.left-tab-model>.tab-list>div{
				display: flex;
				justify-content: center;
				padding:15px 0;
				border-bottom: 1px solid #eee;
			}
			.left-tab-model>.tab-list>div>p:first-of-type{
				width:30px;
			}
			.left-tab-model>.tab-list>div>p:last-of-type{
				line-height: 20px;
			}
			.ma-con>.right-curr{
				width: 100%;
				height: 100%;
				background: white;
				border-top:1px solid #eee;
			}
			.ma-con>.right-curr>.right-search{
				position: fixed;
				width: 80%;
				box-sizing: border-box;
				padding:75px 10px 5px;
				background: white;
			}
			.ma-con>.right-curr>.right-content{
				position: fixed;
				top:118px;
				box-sizing: border-box;
				width: 80%;
				height: calc(100vh - 118px);
				padding:15px 10px;							
				overflow-y: auto;
				background: white;
			}
			.ma-con>.right-curr>.right-content::-webkit-scrollbar {
			    width:0px;
			    height:0px;
			}
			.ma-con .righ-con-list{
				display: flex;
				padding:15px 0;
			}
			.ma-con .righ-con-list>div:nth-of-type(1){
				flex:0 0 40px;
				height: 40px;
				margin-right: 8px;
			}
			.ma-con .righ-con-list>div:nth-of-type(2){
				flex:1 1 0px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 40px;
				overflow: hidden;
			}
			.ma-con .righ-con-list>div:nth-of-type(2)>.chan-color{
				color:rgba(0,0,0,.5);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: normal;
			}
			.ma-con .righ-con-list>div:nth-of-type(3){
				flex:0 0 42px;
				height: 40px;
			}
			.ma-con>.right-curr>.right-search>div{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 35px;
				padding:0 10px;
				border:1px solid #eee;
				border-radius: 15px;
			}
			.ma-con>.right-curr .slider{
				width:20px;
				height: 20px;
			}
			.ma-con>.show-uesr-info{
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 420px;
				background: white;
				border-radius: 15px;
			}
			.ma-con>.show-uesr-info>.user-avatar{
				padding: 6px;
				margin-top: -43px;
				background: white;
				border-radius: 50%;
			}
			.ma-con>.show-uesr-info>h1{
				padding: 30px;
				font-size: 22px;
				opacity: .6;
			}
			.ma-con>.show-uesr-info>.address{
				font-size:14px;
				opacity: .4;
			}
			.ma-con>.show-uesr-info>img{
				margin:25px 0;
			}
			.ma-con>.show-uesr-info>button{
				width: 150px;
				height: 30px;
				background: #3573FA;
				border: none;
				outline: none;
				border-radius: 15px;
				color: white;
			}
			/* 遮罩层 */

			/* 专门用来处理咨询板块的弹窗 */
			#mask-par{
				position: absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				z-index: 2;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#mask-par>.mask-shar{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 140px;
				background: white;
			}
			#mask-par>.mask-shar>h3{
				padding: 15px;
				font-size:15px;
				text-align: center;
				opacity: .6;
			}
			#mask-par>.mask-shar>.shar-change{
				display: flex;
			}
			#mask-par>.mask-shar p{
				flex: 1 1 0;
			}
			#mask-par>.mask-shar .wei-share,
			#mask-par>.mask-shar .py-share{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
			}
			#mask-par>.mask-shar .py-share{
				align-items: flex-end;
			}
			.shar-model-wrap{
				position: absolute;
				bottom: 180px;
				left:10%;
				z-index: 2;
				width: 80%;
				height: 420px;
				background: white;
			}
			.shar-hea{
				height: 130px;
				background: url(skin/img/shar-bg.png) no-repeat red;
				background-size: 100% 100%;
			}
			.shar-hea>h1{
			    text-align: center;
				font-size: 25px;
				color: white;
			}
			.shar-hea>h4{
				text-align: center;
				padding: 5px 0;
				color: rgba(255,255,255,.5);
			}
			.shar-avatar{
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10px 0;
			}
			.shar-content{
				padding: 10px 15px;
			}
			.shar-time{
				display: flex;
				align-items: center;
			}
			.shar-time>span{
				padding: 10px 0;
				font-size: 11px;
			}
			.shar-time>span:first-of-type{
				margin: 0 5px 0 3px;
			}
			.shar-text>h1{
				padding: 5px 0;
				font-size: 15px;
			}
			.shar-text>p{
				height: 90px;
				padding: 6px 0;
				line-height: 16px;
				overflow: auto;
			}
			.shar-text>p::-webkit-scrollbar{
				width: 0;
			}
			.shar-bar{
				padding: 10px 0;
			}
			.shar-bar>p{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;
			}
			.shar-bar>p>span{
				display: flex;
				align-items: center;
			}
			.shar-bar>p>span:first-of-type{
				color: #11C05B;
			}
			.shar-bar>p>span:last-of-type{
				color: #FF1F3B;
			}
			.bar-wrap>p{
				height: 6px;
				float: left;
			}
			.bar-wrap{
				padding: 5px 0;
			}
			.bar-wrap>p{
				transition: .8s;
			}
			.bar-wrap>p:first-of-type{
				width: 0;
				background: #11C05B;
			}
			.bar-wrap>p:last-of-type{
				width: 0;
				background: #FF1F3B;
			}
			.shar-qr-wrap{
				width: 100%;
				display: flex;
			}
			.left-qr{
				flex: 1 1 0;
				padding-right: 10px;
				font-size: 14px;
				color: #0781EE;
			}
			.left-qr>p:first-of-type{
				display: inline-block;
				border-bottom: 2px solid #0781EE;
			}
			.left-qr>p:first-of-type>span:last-of-type{
				display: inline-block;
				padding: 0 10px;
				background: #0781EE;
				color: white;
				font-weight: 600;
				transform: skewX(-10deg) translateX(1px);
			}
			.left-qr>p:last-of-type{
				padding-top: 5px;
				text-align: right;
			}
			.right-qr{
				flex: 0 0 60px;
			}
			/* 专门用来处理咨询板块的弹窗 */
			
			.animated{
				animation-duration: .4s;
				animation-fill-mode:both;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<transition
				:enter-active-class="inAni"	
				:leave-active-class='outAni'
			>
				<div id="mask" :class="{'default':true,'left':maskMa4,'right':maskMa5,'user-qr':maskMa6}" v-if='offMask' @click='closeMask'>
					<div class='ma-con'>
						<!--广告弹窗-->
						<div v-if='maskMa1'>
							<div class='ma-img'>
								<img src="skin/img/adver-img.png" width="100%" height="100%"/>
							</div>
							<span class='small-close' @click='offMask=false'></span>
						</div>
						<!--广告弹窗-->
						
						<!--版本更新弹窗-->
						<div class='mask2' v-if='maskMa2'>
							<div>
								<img src="skin/img/logo.png" width="100%" height="100%"/>
							</div>
							<h2>版本更新</h2>
							<p>BTC新版来了，增加OTC功能，让你买卖简单化，马上体验！</p>
							<button @click='offMask=false'>立即更新</button>
						</div>
						<!--版本更新弹窗-->
						
						<!--红包弹窗-->
						<div v-if='maskMa3'>
							<div class='ma-img' @click.stop='openRed'>
								<img ref='redEv' src="skin/img/red-close.png" width="100%" height="100%"/>
							</div>
						</div>
						<!--红包弹窗-->
						
						<!--顶部菜单导航-->
						<div class="left-tab-model" v-if='maskMa4' @click.stop=''>
							<div class='avatar'>
								<img src="skin/img/avata-3.png" width='100%' height='100%'/>
							</div>
							<div class="tab-list">
								<div @click='changePass'>
									<p>
										<img src="skin/img/icon-chan.png" width='20px' height='20px'/>
									</p>
									<p>修改密码</p>
								</div>
								<div @click='createWa'>
									<p>
										<img src="skin/img/icon-cre-ma.png" width='20px' height='20px'/>
									</p>
									<p>创建钱包</p>
								</div>
								<div @click='invataFri'>
									<p>
										<img src="skin/img/icon-imp.png" width='20px' height='20px'/>
									</p>
									<p>邀请好友</p>
								</div>
							</div>
						</div>
						<!--顶部菜单导航-->
						
						<!--添加币种-->
						<div class='right-curr' v-if='maskMa5' @click.stop=''>
							<div class="right-search">
								<div>
									<input type="text" style='width:100%;'/>
									<img src="skin/img/icon-sea.png" width='25px' height="25px"/>
								</div>
							</div>
							<div class="right-content">
								<!-- <div class="righ-con-list" v-for="(val,index) in 10" :key='index'> -->
								<div class="righ-con-list">
									<div>
										<img src="skin/img/logo2.png" width="100%" height="100%"/>
									</div>
									<div>
										<span>COME</span>
										<span class='chan-color'>comjklefdfa</span>
										<span class='chan-color'>dsaf*******dfadsaf*******dfadsaf*******dfa</span>
									</div>
									<div>
										<span class="switch-off" id="switch-1" val="你好世界（放该条的数据）" style='height: 20px;width: 40px;'></span>
										<!-- <span class="switch-off" :id="'switch-'+index" :val="'你好世界（放该条的数据）'+index" style='height: 20px;width: 40px;'></span> -->
									</div>
								</div>
								
								<div class="righ-con-list">
									<div>
										<img src="skin/img/logo2.png" width="100%" height="100%"/>
									</div>
									<div>
										<span>COME</span>
										<span class='chan-color'>comjklefdfa</span>
										<span class='chan-color'>dsaf*******dfadsaf*******dfadsaf*******dfa</span>
									</div>
									<div>
										<span class="switch-off" id="switch-1" val="你好世界（放该条的数据）" style='height: 20px;width: 40px;'></span>
										<!-- <span class="switch-off" :id="'switch-'+index" :val="'你好世界（放该条的数据）'+index" style='height: 20px;width: 40px;'></span> -->
									</div>
								</div>
								
								<div class="righ-con-list">
									<div>
										<img src="skin/img/logo2.png" width="100%" height="100%"/>
									</div>
									<div>
										<span>COME</span>
										<span class='chan-color'>comjklefdfa</span>
										<span class='chan-color'>dsaf*******dfadsaf*******dfadsaf*******dfa</span>
									</div>
									<div>
										<span class="switch-off" id="switch-1" val="你好世界（放该条的数据）" style='height: 20px;width: 40px;'></span>
										<!-- <span class="switch-off" :id="'switch-'+index" :val="'你好世界（放该条的数据）'+index" style='height: 20px;width: 40px;'></span> -->
									</div>
								</div>
								<div class="righ-con-list">
									<div>
										<img src="skin/img/logo2.png" width="100%" height="100%"/>
									</div>
									<div>
										<span>COME</span>
										<span class='chan-color'>comjklefdfa</span>
										<span class='chan-color'>dsaf*******dfadsaf*******dfadsaf*******dfa</span>
									</div>
									<div>
										<span class="switch-off" id="switch-1" val="你好世界（放该条的数据）" style='height: 20px;width: 40px;'></span>
										<!-- <span class="switch-off" :id="'switch-'+index" :val="'你好世界（放该条的数据）'+index" style='height: 20px;width: 40px;'></span> -->
									</div>
								</div>
								
								<div class="righ-con-list">
									<div>
										<img src="skin/img/logo2.png" width="100%" height="100%"/>
									</div>
									<div>
										<span>COME</span>
										<span class='chan-color'>comjklefdfa</span>
										<span class='chan-color'>dsaf*******dfadsaf*******dfadsaf*******dfa</span>
									</div>
									<div>
										<span class="switch-off" id="switch-1" val="你好世界（放该条的数据）" style='height: 20px;width: 40px;'></span>
										<!-- <span class="switch-off" :id="'switch-'+index" :val="'你好世界（放该条的数据）'+index" style='height: 20px;width: 40px;'></span> -->
									</div>
								</div>
								
								<div class="righ-con-list">
									<div>
										<img src="skin/img/logo2.png" width="100%" height="100%"/>
									</div>
									<div>
										<span>COME</span>
										<span class='chan-color'>comjklefdfa</span>
										<span class='chan-color'>dsaf*******dfadsaf*******dfadsaf*******dfa</span>
									</div>
									<div>
										<span class="switch-off" id="switch-1" val="你好世界（放该条的数据）" style='height: 20px;width: 40px;'></span>
										<!-- <span class="switch-off" :id="'switch-'+index" :val="'你好世界（放该条的数据）'+index" style='height: 20px;width: 40px;'></span> -->
									</div>
								</div>
								<div class="righ-con-list">
									<div>
										<img src="skin/img/logo2.png" width="100%" height="100%"/>
									</div>
									<div>
										<span>COME</span>
										<span class='chan-color'>comjklefdfa</span>
										<span class='chan-color'>dsaf*******dfadsaf*******dfadsaf*******dfa</span>
									</div>
									<div>
										<span class="switch-off" id="switch-1" val="你好世界（放该条的数据）" style='height: 20px;width: 40px;'></span>
										<!-- <span class="switch-off" :id="'switch-'+index" :val="'你好世界（放该条的数据）'+index" style='height: 20px;width: 40px;'></span> -->
									</div>
								</div>
								
								<div class="righ-con-list">
									<div>
										<img src="skin/img/logo2.png" width="100%" height="100%"/>
									</div>
									<div>
										<span>COME</span>
										<span class='chan-color'>comjklefdfa</span>
										<span class='chan-color'>dsaf*******dfadsaf*******dfadsaf*******dfa</span>
									</div>
									<div>
										<span class="switch-off" id="switch-1" val="你好世界（放该条的数据）" style='height: 20px;width: 40px;'></span>
										<!-- <span class="switch-off" :id="'switch-'+index" :val="'你好世界（放该条的数据）'+index" style='height: 20px;width: 40px;'></span> -->
									</div>
								</div>
								
								<div class="righ-con-list">
									<div>
										<img src="skin/img/logo2.png" width="100%" height="100%"/>
									</div>
									<div>
										<span>COME</span>
										<span class='chan-color'>comjklefdfa</span>
										<span class='chan-color'>dsaf*******dfadsaf*******dfadsaf*******dfa</span>
									</div>
									<div>
										<span class="switch-off" id="switch-1" val="你好世界（放该条的数据）" style='height: 20px;width: 40px;'></span>
										<!-- <span class="switch-off" :id="'switch-'+index" :val="'你好世界（放该条的数据）'+index" style='height: 20px;width: 40px;'></span> -->
									</div>
								</div>
								
							</div>
						</div>
						<!--添加币种-->
						
						<!--接受    展示用户二维码和地址-->
						<div class="show-uesr-info" v-if='maskMa6' @click.stop=''>
							<div class='user-avatar'>
								<img src="skin/img/avata-4.png" width="80px" height="80px"/>
							</div>
							<h1>微信name的钱包</h1>
							<p class='address'>154215asdf1231sdfasdf45sd21fa</p>
							<img src="skin/img/qr-address.png" width="150px" height="150px"/>
							<button>复制钱包地址</button>
						</div>
						<!--接受    展示用户二维码和地址-->
					</div>
				</div>
			</transition>

			<!-- 专门用来处理咨询板块的弹窗 -->
			
			<!-- 咨询板块的弹窗遮罩层 -->
			<div id="mask" v-if='maskShare'></div>
			<!-- 咨询板块的弹窗遮罩层 -->
			
			<!--分享方式选择-->
			<transition
				enter-active-class='animated bounceInUp'	
				leave-active-class='animated bounceOutDown'
			>
				<div id="mask-par" v-if='maskShare' @click='maskShare=false;maskShareContent=false;'>
					<div class="mask-shar" @click.stop=''>
						<h3>分享到</h3>
						<div class='shar-change'>
							<p></p>
							<p class='wei-share'>
								<img src="skin/img/wx.png" width="38px" height="30px"/>
								<br/><span>微信</span>
							</p>
							<p></p>
							<p class='py-share'> 
								<img src="skin/img/py.png" width="35px" height="35px"/>
								<br/><span>朋友圈</span>
							</p>
							<p></p>
						</div>
					</div>
				</div>
			</transition>
			<!--分享方式选择-->
			
			<!-- 分享内容 -->
			<transition
				enter-active-class='animated pulse'	
				leave-active-class='animated fadeOut'
			>
				<div class="shar-model-wrap" v-if='maskShareContent'>
					<div class="shar-hea">
						<div class="shar-avatar">
							<img src="skin/img/logo.png" width='20%'>
						</div>
						<h1>BTC快讯</h1>
						<h4>快人一步，尽晓币圈事</h4>
					</div>
					<div class="shar-content">
						<div class='shar-time'>
							<img src="skin/img/icon-time.png" width="11px" height="11px" >
							<span>星期六</span>
							<span>2018-7-22 15:00:00</span>
						</div>
						<div class="shar-text">
							<h1>区块链，未来会怎样？听听专家</h1>
							<p>区块链技术再泉水姐范围被宽泛谈论，起四大护法收到回复啊士大夫呼吁i啊是电脑发卡机手机客户端士大夫蛤科和山东河南福建啊士大夫半年卡额度</p>
						</div>
						<div class="shar-bar">
							<p>
								<span>
									<img src="skin/img/icon-up.png" width="14px" height="14px">
									看多<span>58</span>
								</span>
								<span>
									<img src="skin/img/icon-down.png" width="14px" height="14px">
									看空<span>42</span>
								</span>
							</p>
							<div class="bar-wrap">
								<p></p>
								<p></p>
							</div>
						</div>
						<div class="shar-qr-wrap">
							<div class="left-qr">
								<p>
									<span>扫码下载</span>
									<span>BTC钱包</span>
								</p>
								<p>随时查看最新快讯</p>
							</div>
							<div class="right-qr">
								<img src="skin/img/qr-address.png" width="100%" >
							</div>
						</div>
					</div>
				</div>
			</transition>
			<!-- 分享内容 -->
			
			<!-- 专门用来处理咨询板块的弹窗 -->

			<!--钱包板块-->
			<transition
				enter-active-class='animated fadeInRight'
				leave-active-class='animated fadeOutLeft'
			>
				<div id="par-wal-wrap" v-if='parWalWrap'>
					<div id="top">
						<div class="top-main">
							<div class='hea'>
								<span @click='openTap'></span>
								<span @click='openTip'></span>
							</div>
							<div class="avatar"></div>
							<p class='mon-address'>12341865sdfasd178dfas1dsdf21asd54sd1f5a4sdsd1f45asdeasdfsew5</p>
							<p class='mon-com'>价值（cny）</p>
							<div class="user-info">
								<div :class="{'ani-user':!offRed, 'red-no':!offRed,'red-yes':offRed}" @click='redCli'>
									<p style='height: 100%;'>新用户礼包</p>
								</div>
								<div>
									100.00
								</div>
								<div @click='changeR'>
									
								</div>
							</div>
						</div>
						<div class="top-btn">
							<button @click='sendCli'>发送</button>
							<button @click='getCli'>接收</button>
						</div>				
					</div>
					<div id="mid">
						<div class='mon-con'>
							<div @click='openRInfo'>
								<img src="skin/img/logo2.png" width="50px" height="50px"/>
								<p>
									<span>CONNNME</span>
									<span>麒麟臂</span>
								</p>
							</div>
							<p>1235642154.0</p>
						</div>
						<div class='mon-con'>
							<div>
								<img src="skin/img/logo2.png" width="50px" height="50px"/>
								<p>
									<span>CONNNME</span>
									<span>麒麟臂</span>
								</p>
							</div>
							<p>1235642154.0</p>
						</div>
						<div class='mon-con'>
							<div>
								<img src="skin/img/logo2.png" width="50px" height="50px"/>
								<p>
									<span>CONNNME</span>
									<span>麒麟臂</span>
								</p>
							</div>
							<p>1235642154.0</p>
						</div>
						<div class='mon-con'>
							<div>
								<img src="skin/img/logo2.png" width="50px" height="50px"/>
								<p>
									<span>CONNNME</span>
									<span>麒麟臂</span>
								</p>
							</div>
							<p>1235642154.0</p>
						</div>
						<div class='mon-con'>
							<div>
								<img src="skin/img/logo2.png" width="50px" height="50px"/>
								<p>
									<span>CONNNME</span>
									<span>麒麟臂</span>
								</p>
							</div>
							<p>1235642154.1</p>
						</div>
						<div class='mon-con'>
							<div>
								<img src="skin/img/logo2.png" width="50px" height="50px"/>
								<p>
									<span>CONNNME</span>
									<span>麒麟臂</span>
								</p>
							</div>
							<p>1235642154.1</p>
						</div>
						<div class='mon-con'>
							<div>
								<img src="skin/img/logo2.png" width="50px" height="50px"/>
								<p>
									<span>CONNNME</span>
									<span>麒麟臂</span>
								</p>
							</div>
							<p>1235642154.1</p>
						</div>
						<div class='mon-con'>
							<div>
								<img src="skin/img/logo2.png" width="50px" height="50px"/>
								<p>
									<span>CONNNME</span>
									<span>麒麟臂</span>
								</p>
							</div>
							<p>1235642154.1</p>
						</div>
						<div class='mon-con'>
							<div>
								<img src="skin/img/logo2.png" width="50px" height="50px"/>
								<p>
									<span>CONNNME</span>
									<span>麒麟臂</span>
								</p>
							</div>
							<p>1235642154.1</p>
						</div>
					</div>
				</div>
			</transition>
			<!--钱包板块-->
			
			<!-- 咨询板块 -->
			<transition
				enter-active-class='animated fadeInRight'
				leave-active-class='animated fadeOutLeft'
			>
				<div id="par-cons-wrap" v-if='parConWrap'>
					<div class="cons-hea">
						<span>2018-07-25</span>
						<span>咨讯</span>
						<span>
							<img src="skin/img/cons-search.png" width="25px" height="25px">
						</span>
					</div>
					<div class="cons-content">
						<p style="height: 10px;border-left: 1px solid #eee;"></p>
						<div class="cons-info-wrap">
							<span>18:02</span>
							<h1>区块链，未来会怎么样？听听专家怎么说</h1>
							<p>七五苦涩的风景客户圣诞节恢复意识的规划法国哈月光恢复健康对方啥也给对方四大皆空发哈与时俱进的歌赋四大护法雅阁我是福建高考回家拉是对法国是大家法国普i会引发染发合适的夫i啊还是地方都i官方特殊的年份地方v巨大收益佛哎u的上方还u是</p>
							<div>
								<p>
									<img src="skin/img/icon-up.png" width="20px" height="20px" >
									<span>看多80%</span>
								</p>
								<p>
									<img src="skin/img/icon-down.png" width="20px" height="20px" >
									<span>看空200%</span>
								</p>
								<p @click='openSharModel'>
									<img src="skin/img/icon-share1.png" width="20px" height="20px" >
									<span>分享</span>
								</p>
							</div>
						</div>
						<div class="cons-info-wrap">
							<span>18:02</span>
							<h1>区块链，未来会怎么样？听听专家怎么说</h1>
							<p>七五苦涩的风景客户圣诞节恢复意识的规划法国哈月光恢复健康对方啥也给对方四大皆空发哈与时俱进的歌赋四大护法雅阁我是福建高考回家拉是对法国是大家法国普i会引发染发合适的夫i啊还是地方都i官方特殊的年份地方v巨大收益佛哎u的上方还u是</p>
							<div>
								<p>
									<img src="skin/img/icon-up.png" width="20px" height="20px" >
									<span>看多80%</span>
								</p>
								<p>
									<img src="skin/img/icon-down.png" width="20px" height="20px" >
									<span>看空20%</span>
								</p>
								<p>
									<img src="skin/img/icon-share1.png" width="20px" height="20px" >
									<span>分享</span>
								</p>
							</div>
						</div>
						<div class="cons-info-wrap">
							<span>18:02</span>
							<h1>区块链，未来会怎么样？听听专家怎么说</h1>
							<p>七五苦涩的风景客户圣诞节恢复意识的规划法国哈月光恢复健康对方啥也给对方四大皆空发哈与时俱进的歌赋四大护法雅阁我是福建高考回家拉是对法国是大家法国普i会引发染发合适的夫i啊还是地方都i官方特殊的年份地方v巨大收益佛哎u的上方还u是</p>
							<div>
								<p>
									<img src="skin/img/icon-up.png" width="20px" height="20px" >
									<span>看多80%</span>
								</p>
								<p>
									<img src="skin/img/icon-down.png" width="20px" height="20px" >
									<span>看空20%</span>
								</p>
								<p>
									<img src="skin/img/icon-share1.png" width="20px" height="20px" >
									<span>分享</span>
								</p>
							</div>
						</div>
						<div class="cons-info-wrap">
							<span>18:02</span>
							<h1>区块链，未来会怎么样？听听专家怎么说</h1>
							<p>七五苦涩的风景客户圣诞节恢复意识的规划法国哈月光恢复健康对方啥也给对方四大皆空发哈与时俱进的歌赋四大护法雅阁我是福建高考回家拉是对法国是大家法国普i会引发染发合适的夫i啊还是地方都i官方特殊的年份地方v巨大收益佛哎u的上方还u是</p>
							<div>
								<p>
									<img src="skin/img/icon-up.png" width="20px" height="20px" >
									<span>看多80%</span>
								</p>
								<p>
									<img src="skin/img/icon-down.png" width="20px" height="20px" >
									<span>看空20%</span>
								</p>
								<p>
									<img src="skin/img/icon-share1.png" width="20px" height="20px" >
									<span>分享</span>
								</p>
							</div>
						</div>
						<div class="cons-info-wrap">
							<span>18:02</span>
							<h1>区块链，未来会怎么样？听听专家怎么说</h1>
							<p>七五苦涩的风景客户圣诞节恢复意识的规划法国哈月光恢复健康对方啥也给对方四大皆空发哈与时俱进的歌赋四大护法雅阁我是福建高考回家拉是对法国是大家法国普i会引发染发合适的夫i啊还是地方都i官方特殊的年份地方v巨大收益佛哎u的上方还u是</p>
							<div>
								<p>
									<img src="skin/img/icon-up.png" width="20px" height="20px" >
									<span>看多80%</span>
								</p>
								<p>
									<img src="skin/img/icon-down.png" width="20px" height="20px" >
									<span>看空20%</span>
								</p>
								<p>
									<img src="skin/img/icon-share1.png" width="20px" height="20px" >
									<span>分享</span>
								</p>
							</div>
						</div>
						<div class="cons-info-wrap">
							<span>18:02</span>
							<h1>区块链，未来会怎么样？听听专家怎么说</h1>
							<p>七五苦涩的风景客户圣诞节恢复意识的规划法国哈月光恢复健康对方啥也给对方四大皆空发哈与时俱进的歌赋四大护法雅阁我是福建高考回家拉是对法国是大家法国普i会引发染发合适的夫i啊还是地方都i官方特殊的年份地方v巨大收益佛哎u的上方还u是</p>
							<div>
								<p>
									<img src="skin/img/icon-up.png" width="20px" height="20px" >
									<span>看多80%</span>
								</p>
								<p>
									<img src="skin/img/icon-down.png" width="20px" height="20px" >
									<span>看空20%</span>
								</p>
								<p>
									<img src="skin/img/icon-share1.png" width="20px" height="20px" >
									<span>分享</span>
								</p>
							</div>
						</div>
						<div class="cons-info-wrap">
							<span>18:02</span>
							<h1>区块链，未来会怎么样？听听专家怎么说</h1>
							<p>七五苦涩的风景客户圣诞节恢复意识的规划法国哈月光恢复健康对方啥也给对方四大皆空发哈与时俱进的歌赋四大护法雅阁我是福建高考回家拉是对法国是大家法国普i会引发染发合适的夫i啊还是地方都i官方特殊的年份地方v巨大收益佛哎u的上方还u是</p>
							<div>
								<p>
									<img src="skin/img/icon-up.png" width="20px" height="20px" >
									<span>看多80%</span>
								</p>
								<p>
									<img src="skin/img/icon-down.png" width="20px" height="20px" >
									<span>看空20%</span>
								</p>
								<p>
									<img src="skin/img/icon-share1.png" width="20px" height="20px" >
									<span>分享</span>
								</p>
							</div>
						</div>
					</div>
				</div>
			</transition>
			<!-- 咨询板块 -->
			
			<!-- 行情板块 -->
			<transition
				enter-active-class='animated fadeInRight'
				leave-active-class='animated fadeOutLeft'
			>
				<div id="par-quo-wrap" v-if='parQuoWrap'>
					<div class="quota-hea">
						<p>行情</p>
						<div style="padding: 0 10px;">
							<div class="quota-info-name">
								<span style="text-align: left;">交易对</span>
								<span>最新价</span>
								<span style="text-align: right;">跌涨幅</span>
							</div>
						</div>
						
					</div>
					<div v-if='haveQuo' class="quo-content-wrap">
						<div style="padding: 0 10px;">
							<div class="quo-list">
								<div class="left-1">
									<p>YATAI交易所</p>
									<p>ZQ/CNY</p>
								</div>
								<div class="left-2">
									<p>0.0001</p>
									<p>$0.0001</p>
								</div>
								<div class="left-3">
									<span class='bg-green'>+1.87%</span>
								</div>
							</div>
							<div class="quo-list">
								<div class="left-1">
									<p>YATAI交易所</p>
									<p>ZQ/CNY</p>
								</div>
								<div class="left-2">
									<p>0.0001</p>
									<p>$0.0001</p>
								</div>
								<div class="left-3">
									<span class='bg-red'>+1.87%</span>
								</div>
							</div>
							<div class="quo-list">
								<div class="left-1">
									<p>YATAI交易所</p>
									<p>ZQ/CNY</p>
								</div>
								<div class="left-2">
									<p>0.0001</p>
									<p>$0.0001</p>
								</div>
								<div class="left-3">
									<span class='bg-green'>+1.87%</span>
								</div>
							</div>
							<div class="quo-list">
								<div class="left-1">
									<p>YATAI交易所</p>
									<p>ZQ/CNY</p>
								</div>
								<div class="left-2">
									<p>0.0001</p>
									<p>$0.0001</p>
								</div>
								<div class="left-3">
									<span class='bg-green'>+1.87%</span>
								</div>
							</div>
							<div class="quo-list">
								<div class="left-1">
									<p>YATAI交易所</p>
									<p>ZQ/CNY</p>
								</div>
								<div class="left-2">
									<p>0.0001</p>
									<p>$0.0001</p>
								</div>
								<div class="left-3">
									<span class='bg-green'>+1.87%</span>
								</div>
							</div>
							<div class="quo-list">
								<div class="left-1">
									<p>YATAI交易所</p>
									<p>ZQ/CNY</p>
								</div>
								<div class="left-2">
									<p>0.0001</p>
									<p>$0.0001</p>
								</div>
								<div class="left-3">
									<span class='bg-green'>+1.87%</span>
								</div>
							</div>
							<div class="quo-list">
								<div class="left-1">
									<p>YATAI交易所</p>
									<p>ZQ/CNY</p>
								</div>
								<div class="left-2">
									<p>0.0001</p>
									<p>$0.0001</p>
								</div>
								<div class="left-3">
									<span class='bg-green'>+1.87%</span>
								</div>
							</div>
							<div class="quo-list">
								<div class="left-1">
									<p>YATAI交易所</p>
									<p>ZQ/CNY</p>
								</div>
								<div class="left-2">
									<p>0.0001</p>
									<p>$0.0001</p>
								</div>
								<div class="left-3">
									<span class='bg-green'>+1.87%</span>
								</div>
							</div>
							<div class="quo-list">
								<div class="left-1">
									<p>YATAI交易所</p>
									<p>ZQ/CNY</p>
								</div>
								<div class="left-2">
									<p>0.0001</p>
									<p>$0.0001</p>
								</div>
								<div class="left-3">
									<span class='bg-green'>+1.87%</span>
								</div>
							</div>
							<div class="quo-list">
								<div class="left-1">
									<p>YATAI交易所</p>
									<p>ZQ/CNY</p>
								</div>
								<div class="left-2">
									<p>0.0001</p>
									<p>$0.0001</p>
								</div>
								<div class="left-3">
									<span class='bg-green'>+1.87%</span>
								</div>
							</div>
							<div class="quo-list">
								<div class="left-1">
									<p>YATAI交易所</p>
									<p>ZQ/CNY</p>
								</div>
								<div class="left-2">
									<p>0.0001</p>
									<p>$0.0001</p>
								</div>
								<div class="left-3">
									<span class='bg-green'>+1.87%</span>
								</div>
							</div>
							<div class="quo-list">
								<div class="left-1">
									<p>YATAI交易所</p>
									<p>ZQ/CNY</p>
								</div>
								<div class="left-2">
									<p>0.0001</p>
									<p>$0.0001</p>
								</div>
								<div class="left-3">
									<span class='bg-green'>+1.87%</span>
								</div>
							</div>
							<div class="quo-list">
								<div class="left-1">
									<p>YATAI交易所</p>
									<p>ZQ/CNY</p>
								</div>
								<div class="left-2">
									<p>0.0001</p>
									<p>$0.0001</p>
								</div>
								<div class="left-3">
									<span class='bg-green'>+1.87%</span>
								</div>
							</div>
						</div>
					</div>
					<!--没有数据的块-->
					<div class="no-data" v-else>
						<img src="skin/img/no-data.png" width="120px" height="80px"/><br />
						<p style='opacity: .4;'>暂无数据</p>
					</div>
					<!--没有数据的块-->
				</div>
			</transition>
			<!-- 行情板块 -->
			
			<!--底部导航控制-->
			<div id='bottom'>
				<div :class="{'bg-wa-active':parWalWrap}" @click='parWalWrap=true;parConWrap=false;parQuoWrap=false;'>
					钱包
				</div>
				<div :class="{'bg-con-active':parConWrap}" @click='parWalWrap=false;parConWrap=true;parQuoWrap=false;'>
					咨询
				</div>
				<div :class="{'bg-quo-active':parQuoWrap}" @click='parWalWrap=false;parConWrap=false;parQuoWrap=true;'>
					行情
				</div>
			</div>
			<!--底部导航控制-->
		</div>
		<script src="skin/js/indexBack.js" type="text/javascript" charset="utf-8"></script>
		<script src='skin/js/jquery-3.3.1.min.js'></script>
		<script src="skin/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="skin/js/comm.js" type="text/javascript" charset="utf-8"></script>
		<script src="skin/js/honeySwitch.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
//			localStorage.setItem('red','');
			var app=new Vue({
				el:'#app',
				data:{
					parWalWrap:true,//钱包导航
					parConWrap:false,//咨询导航
					parQuoWrap:false,//行情导航
					haveQuo:true,//代表行情有数据 false行情没得数据
					inAni:'animated zoomIn',
					outAni:'animated zoomOut',
					offMask:false,//控制遮罩层
					maskMa1:false,//第一个遮罩层内容(区块链图片)
					maskMa2:false,//第二个遮罩层内容（立即更新）
					maskMa3:false,//红包遮罩层
					maskMa4:false,//钱包导航左边tap遮罩层
					maskMa5:false,//左边币种选择
					maskMa6:false,//接受钱的遮罩层 显示地址和二维码
					maskShare:false,//专门用来处理咨询中分享方式的遮罩层
					maskShareContent:false,//专门用来处理咨询中分享内容的遮罩层
					offRed:localStorage.getItem('red') //这里应该是拉取接口来判断是不是新用户
				},
				methods:{
					//关闭遮罩层
					closeMask:function(){
						this.offMask=this.maskMa1=this.maskMa2=this.maskMa3=this.maskMa4=this.maskMa5=this.maskMa6=false;
						this.inAni='animated zoomIn';
						this.outAni='animated zoomOut';
					},
					//根据时间戳知道星期几
					getWeek(date) { 
						//要传入13位的毫秒
						// this.getWeek(new Date(1538205566000))  这是用法
						var week; 
						if(date.getDay() == 0) week = "星期日" 
						if(date.getDay() == 1) week = "星期一" 
						if(date.getDay() == 2) week = "星期二" 
						if(date.getDay() == 3) week = "星期三" 
						if(date.getDay() == 4) week = "星期四" 
						if(date.getDay() == 5) week = "星期五" 
						if(date.getDay() == 6) week = "星期六" 
						return week; 
					},
					//在遮罩层中打开红包
					openRed:function(){
						var This=this;
						this.$refs.redEv.src='skin/img/red-open.png';
						setTimeout(function(){
							This.maskMa3=false;
							This.offMask=false;
							localStorage.setItem('red','yes');
							This.offRed=true;
						},1500);
					},
					
					//点击红包（有两种状态 ： 没开红包  已经开了红包）
					redCli:function(){
						if(!this.offRed){
							//新用户没打开过红包
							this.offMask=true;
							this.maskMa3=true;
						}else{
							//老用户调用红包详情记录
							plus.webview.open('red-record.html','redRecord');
						}
					},
					
					//添加新的币种
					changeR:function(){
						this.inAni='animated fadeInRight';
						this.outAni='animated fadeOutRight';
						this.offMask=this.maskMa5=true;
						setTimeout(function(){
							honeySwitch.init();
							var el=$('.switch-off');
							for(var va of el){
								let val=va;//这句必须要，换成var都不行
								switchEvent("#"+$(val).attr('id'),function(){
									console.log('打开了当前开关')
									//当前的switch开关的数据,方便操作
									var data=$(val).attr('val');
									console.log(data);
								},function(){
									console.log('关闭了当前开关')
								});
							}
						},800);
					},
					
					//进入币交易记录详情(主页的)
					openRInfo:function(){
						var style=viewTitle(true,'#3573fa','COINNAME','#ffffff');  
						plus.webview.open( 'transaction-detail.html', 'transactionDetail' ,style);
					},
					
					//发送
					sendCli:function(){
						plus.webview.open('send.html','send');
					},
					
					//接受
					getCli:function(){
						this.offMask=this.maskMa6=true;
					},
					
					//左边导航功能集中
					
					//修改密码
					changePass:function(){
						// var style=viewTitle(true,'#3573fa','重置交易密码','#ffffff');  
						plus.webview.open( 'change-password.html', 'changePassword' ,{},'slide-in-right');
						this.closeMask();
					},
					
					//创建钱包
					createWa:function(){
						var style=viewTitle(true,'#3573fa','','#ffffff'); 
						plus.webview.open( 'create-wallet.html', 'createWallet' ,style);
					},
					
					//邀请好友
					invataFri:function(){
						plus.webview.open( 'invitation-friend.html', 'invitationFriend');
						this.closeMask();
					},
					
					
					//顶部导航功能集中
					
					//打开菜单点击
					openTap:function(){
						this.inAni='animated bounceInLeft';
						this.outAni='animated bounceOutLeft';
						this.offMask=this.maskMa4=true;
					},
					
					//打开消息中心
					openTip:function(){
						var style=viewTitle(true,'#3573fa','消息中心','#ffffff'); 
						plus.webview.open( 'tip-center.html', 'tipCenter' ,style);
					},
					
					//打开分享弹窗
					openSharModel(content){
						this.maskShare=true;
						this.maskShareContent=true;
						setTimeout(function(){
							$('.bar-wrap>p').eq(0).css('width','42%');
							setTimeout(function(){
								$('.bar-wrap>p').eq(1).css('width','58%');
							},800);
						},100);
					}
				}
			});
		</script>
	</body>
</html>


